<template>
	<view class="con-box">
		<!-- 标签栏 -->
		<view class="tag-box" >
			<!-- 每行三个 -->
			<view class="hang-box" :class="{'allheight': allheight}">
				<!-- <view class="" style="height: 100%;display: flex;flex-wrap: wrap; transition: all .3s;"> -->
					<view
					v-for="item in listData"
					:class="{'active':selectId == item.index}"
					class="tit-box"
					@click="selectId = item.index"
					>
					   {{item.name}}
					   ({{item.num}})
					<!-- </view> -->
				</view>
			</view>
			<view class="up-box" v-if="listData.length > 3">
				<view
				class=""
				@click="allheight = !allheight"
				style="font-size: 25rpx;"
				>
					{{allheight ? '收起' : '查看更多'}}
				</view>
			</view>
		</view>
		<view class="card-box">
			<view v-for="(item,index) in cardData" class="card" >
				<view class="header-box">
					<view class="img-box">
						<image :src="item.userlogo" alt="" />
					</view>
					<view class="user-box">
						<view class="name">
							{{item.username}}
						</view>
						<view class="" style="padding-top: 5rpx;">
						<u-rate :common="5" :current="item.score" disabled></u-rate>
						</view>
						<view class="type">
							<span style="margin-left: 20rpx;">{{item.type}}</span>
						</view>
					</view>
				</view>
				<view class="con-boxs">
					<view class="content">
						{{item.content ? item.content : '此用户没有填写评价'}}
					</view>
					<view v-if="false" class="img-box">
						<view class="img">
							<image  src="https://image.hzwltb69.com/upload/image/202305/b09089a1-d45e-4293-aa3b-5c83bda61d28_large.jpg" alt="" />
						</view>
						<view class="img">
							<image src="https://image.hzwltb69.com/upload/image/202305/b09089a1-d45e-4293-aa3b-5c83bda61d28_large.jpg" alt="" />
						</view>
						<view class="img">
							<image src="https://image.hzwltb69.com/upload/image/202305/b09089a1-d45e-4293-aa3b-5c83bda61d28_large.jpg" alt="" />
						</view>
					</view>
				</view>
				<view class="info-box">
					<view class="img-box">
						<view class="img">
              <image :src="item.img" alt="" />
						</view>
						<view class="con-boxx">
							<view class="title">
								{{item.name}}
							</view>
							<view class="pirce">
								<span class="rmb">￥</span>
								<span class="infopirce">{{item.price}}</span>
							</view>
						</view>
					</view>
					<view hover-class="active" class="shop" @click="goShop(item.id)">
						去购买
					</view>
				</view>
			</view>
		</view>
	<u-loadmore v-show="isLoading" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				storeId: null,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				listData:[
					{
						name:'全部',
						num:'',
						index:1,
					},
					// {
					// 	name:'全部(2305)',
					// 	index:2,
					// },
					// {
					// 	name:'全部(2305)',
					// 	index:3,
					// },
					// {
					// 	name:'全部(2305)',
					// 	index:4,
					// },
				],
				selectId:1,
				allheight:false,
				page:0,
				isLoading: true,
				cardData:[],
			}
		},
		methods: {
			// 跳转购买
			goShop(e){
				console.log(e);
				this.$Router.push({path:'/pages/goods/detail',query:{ id : e } })
			},
			// 请求数据
			getGoodsList(){
				let that = this
				that.$http('review.getlist',{
					page:that.page,
					storeId: that.storeId
				})
				.then(res => {
					// 在这里进行判断
					if(res.data.length > 0){
						if(that.cardData.length > 0){
							// 数据进行拼接
							let data = res.data
							data.forEach((item,index) => {
								that.cardData.push({
									username:item.member.displayName,
									userlogo:item.member.messageLogo,
									content:item.content,
									type:item.specifications[0],
									price:item.product.price,
									name:item.product.name,
									img:item.product.img,
									id:item.product.id,
									score: item.score,
								})
							})
						}
						that.loadStatus = 'loadmore'
					}else{
						// 无数据
						that.loadStatus = 'nomore'
					}
				})
			}
		},
		onLoad(e){
			this.storeId = e.id
			console.log(this.storeId);
		},
		onReachBottom(){
			if(this.loadStatus == 'nomore') return
			this.loadStatus = 'loading'
			this.page += 1
			this.getGoodsList()
		},
		// 初始化
		onShow(){
			let that = this
			that.cardData=[];
			// this.getGoodsList()
			// 进行数据初始化
			that.$http('review.getlist',{
				page:that.page,
				storeId: that.storeId
			})
			.then(res => {
					// 赋值
					let data = res.data
					that.listData[0].num = res.total
					data.forEach((item,index) => {
						that.cardData.push({
							username:item.member.displayName,
							userlogo:item.member.messageLogo,
							content:item.content,
							type:item.specifications[0],
							price:item.product.price,
							name:item.product.name,
							img:item.product.img,
							id:item.product.id,
							score: item.score
						})
					})
			})
		}
	}
</script>

<style lang="scss" scoped>
.con-box{
		background-color: #f5f5f5;
		height: 100vh;
		.card-box{
			margin-top: 30rpx;
			.card{
				margin-top: 30rpx;
				padding: 0 20rpx 20rpx 20rpx;
				min-height: 385rpx;
				background-color: #fff;
				.header-box{
					display: flex;
					height: 100rpx;
					align-items: center;
					padding-top: 40rpx;
					.img-box{
						width: 80rpx;
						height: 80rpx;
						// background-color: pink;
						border-radius: 50%;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.user-box{
						margin-left: 30rpx;
						display: flex;
						flex-direction: column;
						.name{
							padding-top: 10rpx;
							font-size: 28rpx;
						}
						.type{
							margin-top: 10rpx;
							font-size: 25rpx;
							color: #9b9b9b;
						}
					}
				}
				.con-boxs{
					padding-top: 30rpx;
					.content{
						color: #525252;
						margin: 30rpx 0 30rpx 0;
					}
					.img-box{
						overflow: hidden;
						display: flex;
						justify-content: space-between;
						.img{
							overflow: hidden;
							border-radius: 10rpx;
							width: 235rpx;
							height: 235rpx;
							// background-color: pink;
							image{
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			    .info-box{
					// margin-top: 40rpx;
					// margin-bottom: 20rpx;
					height: 120rpx;
					background-color: #f3f3f3;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					// justify-content: space-around;
					padding: 0 20rpx 0 5rpx;
					.img-box{
						display: flex;
						margin-right: 20rpx;
						.img{
							border-radius: 10rpx;
							overflow: hidden;
							width: 115rpx;
							height: 115rpx;
							background-color: pink;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.con-boxx{
							margin-top: 10rpx;
							margin-left: 20rpx;
							display: flex;
							flex-direction: column;
							.title{
								color: #575759;
								width: 400rpx;
								// background-color: pink;
							white-space: nowrap;
								overflow: hidden;
								 text-overflow: ellipsis;
							}
							.pirce{
								color: #de392d;
								font-weight: 600;
								margin-top: 10rpx;
								.rmb{
									font-size: 20rpx;
								}
								.infopirce{
									font-size: 28rpx;
								}
							}
						}
					}
					.shop{
						transition: all .3s;
						// margin-left: 40rpx;
						width: 150rpx;
						color: #de392d;
						text-align: center;
						height: 60rpx;
						line-height: 60rpx;
						border: 1px solid #de392d;
						border-radius: 15rpx;
					}
				}
			}
		}
}
.tag-box{
	background-color: #fff;
	// padding-bottom: 50rpx;
	
	.hang-box{
		// transition: all .3s;
		position: relative;
		padding: 0 30rpx 0 30rpx; 
		height: 80rpx;
		// height: 100%;
		overflow: hidden;
		display: flex;
		align-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding-bottom: 50rpx;
		.tit-box{
			margin-top: 20rpx;
			font-size: 26rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 15rpx;
			color: #545651;
			background-color: #fbeded;
			padding: 0 20rpx 0 20rpx;
			margin-right: 40rpx;
		}
	}
	.up-box{
		height: 50rpx;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// position: absolute;
		// bottom: -10rpx;
		// left: 0;
	}
}
.active{
	color: #fff !important;
	background-color: #de392d !important;
}
.allheight{
	transition: all .3s !important;
	height: 100% !important;
}
</style>
